@import './theme/default.less';
@active_color: @theme-primary-2;
@light_blue: @theme-primary-4;
@disable_color: @theme-stroke-4;
@light_grey: @theme-stroke-6;
@lighter_grey: @theme-stroke-7;
@lightest_grey: @theme-stroke-9;
@error_color: @theme-error-2;
@default_width: 240px;
@double_default_width: 480px;
@input_width: 183px;

.zent-datetime-picker {
  box-sizing: border-box;
  display: inline-block;
  line-height: normal;
  position: relative;

  .picker-seperator {
    font-size: 12px;
    color: @theme-stroke-3;
    padding: 0 10px;
  }

  .picker-input {
    color: @theme-stroke-4;
    position: relative;
    box-sizing: border-box;
    width: @input_width;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: @theme-stroke-10;
    border-radius: 2px;

    &--combine {
      border: 1px solid @theme-stroke-5;
      padding: 0 10px;
    }

    &--combine.picker-input--disabled {
      border-color: @theme-stroke-7;
    }

    .zent-input {
      color: inherit;
    }

    .zenticon {
      line-height: 30px;
      position: absolute;
      right: 10px;
      top: 0;
      color: @theme-stroke-5;
    }

    .zenticon-calendar-o {
      display: block;
    }

    .zenticon-clock-o {
      display: block;
    }

    .zenticon-close-circle {
      display: none;
    }

    &--range {
      width: 240px;
    }

    &--showTime {
      width: 320px;
    }

    &--show-clear-icon {
      color: @theme-stroke-1;

      &:hover {
        .zenticon-close-circle {
          display: block;
        }

        .zenticon-calendar-o {
          display: none;
        }

        .zenticon-clock-o {
          display: none;
        }
      }
    }

    &--disabled {
      background: @lightest_grey;
      color: @light_grey;
      cursor: not-allowed;

      &:hover {
        .zenticon-close-circle {
          display: none;
        }

        .zenticon-calendar-o {
          display: block;
        }

        .zenticon-clock-o {
          display: block;
        }
      }
    }
  }

  &-popover {
    line-height: 1;
    z-index: 2000;

    .date-picker,
    .month-picker,
    .time-picker,
    .range-picker,
    .week-picker,
    .year-picker,
    .quarter-picker {
      background: @theme-stroke-10;
      width: @default_width;
      font-size: 12px;
      border-radius: 2px;
      box-shadow: 0 1px 4px @theme-mask-black-2;
      z-index: 10;
    }

    .grid-cell {
      vertical-align: middle;
      padding: 0;
    }

    .range-picker {
      width: @double_default_width;

      .date-picker {
        display: inline-block;
        vertical-align: top;
        box-shadow: none;

        & + .date-picker {
          position: relative;
          box-sizing: border-box;
          border-left: 1px solid @lighter_grey;
          left: -1px;
        }

        .month-panel {
          .grid-cell {
            height: 47.5px;
          }
        }

        .year-panel {
          .grid-cell {
            height: 47.5px;
          }
        }

        &.small {
          .month-panel {
            .grid-cell {
              height: 41.5px;
            }
          }

          .year-panel {
            .grid-cell {
              height: 41.5px;
            }
          }
        }
      }

      &--showTime {
        .date-picker {
          .month-panel,
          .year-panel {
            .grid-cell {
              height: 56px;
            }
          }

          &.small {
            .month-panel,
            .year-panel {
              .grid-cell {
                height: 56px;
              }
            }
          }

          .time-panel {
            .panel-content {
              height: 265px;
            }
          }
        }
      }
    }

    .date-panel,
    .month-panel,
    .quarter-panel,
    .year-panel {
      position: relative;
      width: @default_width;
      background: @theme-stroke-10;
      color: @theme-stroke-1;
    }

    .date-picker,
    .week-picker {
      .date-panel {
        .grid-cell {
          padding: 4px 0;
        }
      }

      .month-panel {
        position: absolute;
        top: 0;
        left: 0;

        .grid-cell {
          height: 47.5px;
          vertical-align: middle;
          padding: 0;
        }
      }

      .year-panel {
        .grid-cell {
          height: 47.5px;
          vertical-align: middle;
          padding: 0;
        }
      }

      &.small {
        .date-panel {
          .grid-cell {
            padding: 2px 0;
          }
        }

        .month-panel {
          .grid-cell {
            height: 55.5px;
            padding: 0;
          }
        }

        .year-panel {
          .grid-cell {
            height: 55.5px;
          }
        }
      }
    }

    .month-picker {
      .month-panel {
        .grid-cell {
          height: 47.5px;
        }

        .year-panel {
          .grid-cell {
            height: 47.5px;
            padding: 0;
          }
        }
      }

      &.small {
        .month-panel {
          .grid-cell {
            height: 36px;
          }
        }
      }
    }

    .year-picker {
      .year-panel {
        position: relative;

        .grid-cell {
          height: 47.5px;
          padding: 0;
        }
      }

      &.small {
        .year-panel {
          .grid-cell {
            height: 41.5px;
          }
        }
      }
    }

    .quarter-picker {
      .quarter-panel {
        height: 240px;

        .grid-cell {
          height: 47.5px;
        }
      }

      .year-panel {
        .grid-cell {
          height: 47.5px;
          padding: 0;
        }
      }
    }

    .panel__header {
      position: relative;
      text-align: center;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid @lighter_grey;
      box-sizing: border-box;

      .link--prev {
        cursor: pointer;
        position: absolute;
        left: 25px;
        padding: 0 10px;
        font-size: 8px;

        .zenticon {
          transform: rotate(180deg);
        }
      }

      .link--next {
        cursor: pointer;
        position: absolute;
        right: 25px;
        padding: 0 10px;
        font-size: 8px;
      }

      .panel__title {
        cursor: pointer;
      }
    }

    .panel__footer {
      box-sizing: border-box;
      height: 54px;
      line-height: 54px;
      padding-right: 10px;
      text-align: right;
      border-top: 1px solid @lighter_grey;

      .btn--confirm {
        margin-left: 15px;
      }

      .link--current {
        color: @active_color;
        cursor: pointer;
      }

      .link--disabled {
        color: @disable_color;
      }

      .error-tips {
        color: @error_color;
        font-size: 12px;
      }
    }

    .panel-table {
      padding: 6px;
      justify-content: center;
      align-items: center;

      &__row {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;

        li {
          display: inline-flex;
          flex: 1;
          align-items: center;
          justify-content: center;
        }
      }

      &__head {
        padding: 6px 0;
      }

      .panel__cell {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        border-radius: 2px;
        cursor: pointer;
        position: relative;

        &:hover {
          background: @light_blue;
        }

        &--current {
          color: @active_color;
          border: 1px solid @active_color;
        }

        &--different {
          color: @disable_color;
          background: none;

          &:before,
          &:after {
            display: none;
          }
        }

        &--in-range {
          background: @light_blue;
          border: none;
          border-radius: 0;

          &:before {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: @light_blue;
            position: absolute;
            right: -8px;
            top: 0;
          }

          &:after {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: @light_blue;
            position: absolute;
            left: -8px;
            top: 0;
          }
        }

        &--in-selected {
          background: @light_blue;
          border: none;
          border-radius: 0;

          &:before {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: @light_blue;
            position: absolute;
            right: -8px;
            top: 0;
          }

          &:after {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: @light_blue;
            position: absolute;
            left: -8px;
            top: 0;
          }
        }

        &--disabled {
          cursor: not-allowed;
          color: @lighter_grey;
          border-color: @lighter_grey;
          background: transparent;

          &:hover {
            background: @theme-stroke-10;
          }

          &:before,
          &:after {
            display: none;
          }
        }

        &--selected {
          background: @active_color;
          color: @theme-stroke-10;

          &:hover {
            background: @active_color;
          }
        }

        &.date-panel__cell {
          width: 20px;
          height: 20px;
          line-height: 20px;
        }

        &.month-panel__cell {
          width: 32px;
          height: 32px;
          line-height: 32px;
        }

        &.year-panel__cell {
          width: 50px;
          height: 30px;
          line-height: 30px;
        }

        &.quarter-panel__cell {
          height: 32px;
          line-height: 32px;
          width: 100%;
        }
      }
    }

    .year-panel {
      position: absolute;
      top: 0;
      left: 0;
    }

    .time-panel {
      &__cell {
        padding: 3px;
      }

      .panel-table__row:last-child {
        display: block;

        .grid-cell {
          width: 14.28%;
        }
      }

      .panel-content {
        position: absolute;
        top: 0;
        left: 0;
        height: 327px;
        width: @default_width;
        background: @theme-stroke-10;
      }

      &__preview {
        margin: 12px 10px;
        height: 31px;
        line-height: 31px;
        border: 1px solid @theme-stroke-5;
        border-radius: 2px;
        text-align: center;
        display: flex;

        .time__number {
          flex: 1;
          cursor: pointer;
          border-right: 1px solid @theme-stroke-5;

          &:last-child {
            border-right: none;
          }
        }
      }
    }

    .time-picker-panel {
      &__header {
        height: 50px;
        display: flex;
        align-items: center;
      }

      &__tab-group {
        margin: 12px 60px;
        height: 31px;
        line-height: 31px;
        text-align: center;
        display: flex;
        flex: 1;

        &.show-second {
          margin: 12px 30px;
        }

        .time__number {
          flex: 1;
          cursor: pointer;
          border: 1px solid @theme-stroke-5;
          border-right-width: 0;
          user-select: none;

          &:first-child {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
          }

          &:last-child {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            border-right-width: 1px;
          }

          &.checked {
            border: 1px solid @active_color;
            color: @active_color;
            outline: none;
          }

          &.checked + .time__number {
            border-left-width: 0;
          }
        }
      }

      &__content {
        height: 210px;
        padding: 6px 0;

        .grid-cell {
          padding: 2px 0;
        }
      }

      &__footer {
        .panel__footer {
          border-top: none;
        }
      }
    }
  }

  .time-picker-input {
    width: 100px;
  }

  .week-picker-input {
    width: 195px;
  }
}
